<template>
  <!-- 配送员定位 -->
  <div class="main">
    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @ready="handler"
    >
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT" />
      <bm-marker v-for="(item,index) in gasmanMap" :key="index" :position="{lng: item.lng, lat: item.lat}" @click="look(item)">
        <bm-label :content="item.name" :offset="{width: -20, height: 30}" />
      </bm-marker>
      <bm-info-window :position="position" :show="show" @close="infoWindowClose" @open="infoWindowOpen">
        <span>待派订单：</span>
        <lb-table
          ref="lbTable"
          class="table"
          border
          element-loading-text="加载中"
          :column="tableData02.column"
          :data="gasmanWinData.orderList"
          :total="tableData02.total"
          style="overflow: auto;"
          align="center"
        />
        <br>
        <span>实时库存明细：</span>
        <lb-table
          ref="lbTable"
          class="table"
          border
          element-loading-text="加载中"
          :column="tableData03.column"
          :data="gasmanWinData.storeDetailList"
          :total="tableData03.total"
          style="overflow: auto;"
          align="center"
        />
      </bm-info-window>
    </baidu-map>
    <!-- ********************************************* -->
    <div ref="right" class="right">
      <span class="rightSpan">配送员列表</span>
      <i class="el-icon-caret-right" @click="fold('right')" />
      <el-card class="rightCard">
        <el-form ref="form" :model="query" label-width="0px">
          <el-form-item class="merge-item">
            <el-select v-model="qtype" style="width: 80px; margin-right: 2px;">
              <el-option :value="1" label="姓名" />
              <el-option :value="2" label="电话" />
            </el-select>
            <el-input v-model="txt" style="width: 190px; margin-right: 2px;" placeholder="请输入" />
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          </el-form-item>
          <lb-table
            ref="lbTable"
            v-el-height-adaptive-table="{bottomOffset:10}"
            class="table"
            border
            highlight-current-row
            element-loading-text="加载中"
            :column="tableData01.column"
            :data="allMap"
            :total="tableData01.total"
            custom-column
            style="overflow: auto;"
            align="center"
          />
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
  import gasman from './gasman.json'
  import gasmanMap from './gasmanMap.json'
  import gasmanWinData from './gasmanWinData.json'

  export default {
    name: 'distributorPosition',
    data() {
      return {
        show: false,
        allMap: [],
        position: { lng: 0, lat: 0 },
        from: {},
        center: { lng: 0, lat: 0 },
        zoom: 5,
        txt: '',
        qtype: 1,
        query: {},
        tableData01: {
          total: 0,
          column: [
            {
              type: 'index',
              width: 40
            },
            {
              label: '定位',
              width: 50,
              render: (h, { row }) =>
              <span onClick={() => this.getlocation(row)}>
                {row.lat && row.lng && <i class='el-icon-location' style='color:#F56C6C; cursor:pointer'/>}
              </span>
            },
            {
              prop: 'userName',
              label: '姓名'
            },
            {
              prop: 'uphone',
              label: '电话',
              width: 110
            },
            {
              prop: 'createTime',
              label: '最后定位时间',
              width: 210
            }
          ],
          data: {
            rows: []
          }
        },
        tableData02: {
          total: 0,
          column: [
            {
              prop: 'gtName',
              label: '订单编号'
            },
            {
              prop: 'goodsName',
              label: '客户姓名'
            },
            {
              prop: 'gdStatus',
              label: '地址'
            },
            {
              prop: 'gdCount',
              label: '电话'
            }
          ],
          data: {
            rows: []
          }
        },
        tableData03: {
          total: 0,
          column: [
            {
              prop: 'gtName',
              label: '商品类型'
            },
            {
              prop: 'goodsName',
              label: '商品名称',
              width: 110
            },
            {
              prop: 'gdStatus',
              label: '状态',
              render: (h, { row }) => <span>{this.gdStatus === 1 ? '重' : '轻'}</span>
            },
            {
              prop: 'gdCount',
              label: '数量'
            }
          ],
          data: {
            rows: []
          }
        },
        // 配送员
        gasman: [],
        // 配送员定位
        gasmanMap: [],
        // 配送明细
        gasmanWinData: {
          orderList: [],
          storeDetailList: []
        }
      }
    },
    created() {
      this.gasman = gasman.data
      this.gasmanMap = gasmanMap.data
      this.gasmanWinData = gasmanWinData.data
    },
    mounted() {
      this.merge()
    },
    methods: {
      infoWindowClose() {
        this.show = false
      },
      infoWindowOpen() {
        this.show = true
      },
      look(item) {
        this.from = item
        this.content = item.name
        this.position.lng = item.lng
        this.position.lat = item.lat
        this.show = true
      },
      handler({ BMap, map }) {
        // console.log(BMap, map)
        this.center.lng = 114.298572
        this.center.lat = 30.584355
        this.zoom = 12
      },
      // 折叠效果
      fold(refItem) {
        const classname = event.target.className
        const flag = classname.includes('right')
        if (flag) {
          event.target.className = 'el-icon-caret-left'
        } else {
          event.target.className = 'el-icon-caret-right'
        }
        var width = this.$refs[refItem].style.width
        if (width === '20px') {
          this.$refs[refItem].style.width = '360px'
          this.$refs[refItem].childNodes[0].style.display = 'block'
          this.$refs[refItem].childNodes[4].style.display = 'block'
        } else {
          this.$refs[refItem].style.width = '20px'
          this.$refs[refItem].childNodes[0].style.display = 'none'
          this.$refs[refItem].childNodes[4].style.display = 'none'
        }
      },
      search() {

      },
      // 定位
      getlocation(row) {
        this.position.lat = row.lat
        this.position.lng = row.lng
        this.center = this.position
        this.show = true
      },
      // 合并
      merge() {
        const allMap = this.gasman.map(item => {
          const data = this.gasmanMap.find(i => item.userName === i.name)
          return {
            ...item,
            ...data,
            createTime: data ? data.createTime : ''
          }
        })
        return this.allMap = allMap
      }
    }
  }
</script>

<style lang='scss' scoped>
.main {
  display: flex;
  font-size: 14px;

  .map {
    width: 100%;
    height: 820px;
  }

  .right {
    position: relative;
    width: 360px;
    height: 100%;
    padding: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #777;
    transition: all 0.3s;

    i {
      position: absolute;
      top: 3px;
      right: 0;
    }

    .rightCard {
      height: 100%;

      /deep/ .el-card__body {
        padding: 0;
      }
      /deep/ .el-card__header {
        height: 24px;
        padding: 0 10px;
        font-size: 14px;
        font-weight: bold;
        // padding: 0;
        line-height: 24px;
        color: #373A3C;
        background: #e3e3e3;
        border: 1px solid #ddd;
        box-sizing: border-box;
      }
    }
  }
}
</style>
